
<template>
  <!-- 横幅广告区域 -->
  <div class="content-wrapper">
    <div class="banner myFlex-x">
      <img src="@/assets/img/banner.png" alt="横幅广告" class="banner-img" />
    </div>
    <!-- 导航菜单区域 -->
    <div class="menu-bar">
      <div  class="menu-category">
        <h3 @click="goYq()"class="category-title">言情小说</h3>
        <div class="novel-list">
          <div @click="goDetail(yq)"class="novel-item" v-for="(yq,index) in yqList":key="index">
            <span>《{{yq.name}}》</span>
          </div>
          <!-- 可继续添加更多小说条目 -->
        </div>
      </div>
      <div  class="menu-category">
        <h3 @click="goNoyq()" class="category-title">纯爱小说</h3>
        <div class="novel-list">
          <div @click="goDetail(chunai)" class="novel-item" v-for="(chunai,index) in chunaiList":key="index">
            <span>《{{chunai.name}}》</span>
          </div>
          <!-- 可继续添加更多小说条目 -->
        </div>
      </div>
      <div  class="menu-category">
        <h3 @click="goYs ()" class="category-title">衍生/轻小说</h3>
        <div class="novel-list">
          <div @click="goDetail(ys)" class="novel-item" v-for="(ys,index) in ysList":key="index">
            <span>《{{ys.name}}》</span>
          </div>
          <!-- 可继续添加更多小说条目 -->
        </div>
      </div>
      <div  class="menu-category">
        <h3 @click="goNocp ()" class="category-title">无CP+小说</h3>
        <div class="novel-list">
          <div @click="goDetail(wucp)" class="novel-item" v-for="(wucp,index) in wucpList":key="index">
            <span>《{{wucp.name}}》</span>
          </div>
          <!-- 可继续添加更多小说条目 -->
        </div>
      </div>
      <div  class="menu-category">
        <h3 @click="goBh ()"class="category-title">百合小说</h3>
        <div class="novel-list">
          <div @click="goDetail(bl)" class="novel-item" v-for="(bl,index) in blList":key="index">
            <span>《{{bl.name}}》</span>
          </div>

          <!-- 可继续添加更多小说条目 -->
        </div>
      </div>
    </div>
    <!-- 底部功能区域 -->
    <div class="bottom-bar">
      <div class="menu-bottom">
        <div class="bottom-link">原创小说</div>
        <div class="bottom-link">完结文库</div>
        <div class="bottom-link">出版影视</div>
        <div class="bottom-link">中短篇小说</div>
        <div class="bottom-link">小书喵悦读</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {router} from "@/router/router.ts";
import request from "@/utils/request.ts";
import {onMounted} from "vue";
import {ElMessage} from "element-plus";
import {ref,reactive} from "vue";


//创建钩子获取数据
let blList = ref()
let wucpList = ref()
let yqList = ref()
let ysList = ref()
let chunaiList = ref()

//获取数据的页面
onMounted(()=>{
  request.get("/getBl")
      .then(response=>{
        blList.value=response.data.slice(0, 12)
      })
      .catch(error=>{
        ElMessage.error(error)
      })
  request.get("/getWucp")
      .then(response=>{
        wucpList.value=response.data.slice(0, 12)
      })
      .catch(error=>{
        ElMessage.error(error)
      })
  request.get("/getYq")
      .then(response=>{
        yqList.value=response.data.slice(0, 12)
      })
      .catch(error=>{
        ElMessage.error(error)
      })
  request.get("/getYs")
      .then(response=>{
        ysList.value=response.data.slice(0, 12)
      })
      .catch(error=>{
        ElMessage.error(error)
      })
  request.get("/getChunai")
      .then(response=>{
        chunaiList.value=response.data.slice(0, 12)
      })
      .catch(error=>{
        ElMessage.error(error)
      })
})

// function goYq(){
//   window.open(router.resolve({path: '/yq'}))
// }
function goYq() {
  router.push({path: '/yq'})
}
function goNoyq() {
  router.push({path: '/Noyq'})
}
function goNocp(){
  router.push({path: '/Nocp'})
}
function goYs(){
  router.push({path: '/ys'})
}
function goBh(){
  router.push({path: '/bh '})
}

//使用小说对象作为参数并打开新窗口跳转详情页（导航栏上只显示小说id和名字）
function goDetail(story) {
  window.open(router.resolve({path: '/details',query:{"story":JSON.stringify(story)}}).href)
}

</script>

<style lang="css" src="@/assets/css/content.css"></style>
<!--<template>-->
<!--  &lt;!&ndash; 横幅广告区域 &ndash;&gt;-->
<!--  <div class="content-wrapper">-->
<!--    <div class="banner myFlex-x">-->
<!--      <img src="@/assets/img/banner.png" alt="横幅广告" class="banner-img" />-->
<!--    </div>-->
<!--    &lt;!&ndash; 导航菜单区域 &ndash;&gt;-->
<!--    <div class="menu-bar">-->
<!--      <div @click="goYq()" class="menu-category">-->
<!--        <h3 class="category-title">言情小说</h3>-->
<!--        <div class="novel-list">-->
<!--          <div class="novel-item">《坏事多磨》</div>-->
<!--          <div class="novel-item">《宠后之路》</div>-->
<!--          <div class="novel-item">《重回老板年少时》</div>-->
<!--          <div class="novel-item">《坏事多磨》</div>-->
<!--          <div class="novel-item">《宠后之路》</div>-->
<!--          <div class="novel-item">《重回老板年少时》</div>-->
<!--          &lt;!&ndash; 可继续添加更多小说条目 &ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
<!--      <div @click="goNoyq()" class="menu-category">-->
<!--        <h3 class="category-title">纯爱小说</h3>-->
<!--        <div class="novel-list">-->
<!--          <div class="novel-item">《回到民国当导演》</div>-->
<!--          <div class="novel-item">《阿蛮翻车指南》</div>-->
<!--          <div class="novel-item">《金钱帮》</div>-->
<!--          <div class="novel-item">《回到民国当导演》</div>-->
<!--          <div class="novel-item">《阿蛮翻车指南》</div>-->
<!--          <div class="novel-item">《金钱帮》</div>-->
<!--          &lt;!&ndash; 可继续添加更多小说条目 &ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
<!--      <div @click="goYs ()" class="menu-category">-->
<!--        <h3 class="category-title">衍生/轻小说</h3>-->
<!--        <div class="novel-list">-->
<!--          <div class="novel-item">《同袍爱》</div>-->
<!--          <div class="novel-item">《猎人同人-幸福》</div>-->
<!--          <div class="novel-item">《玩家都以为我是邪神》</div>-->
<!--          <div class="novel-item">《同袍爱》</div>-->
<!--          <div class="novel-item">《猎人同人-幸福》</div>-->
<!--          <div class="novel-item">《玩家都以为我是邪神》</div>-->
<!--          &lt;!&ndash; 可继续添加更多小说条目 &ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
<!--      <div @click="goNocp ()" class="menu-category">-->
<!--        <h3 class="category-title">无CP+小说</h3>-->
<!--        <div class="novel-list">-->
<!--          <div class="novel-item">《时之歌：春日醒觉诗》</div>-->
<!--          <div class="novel-item">《阿轻》</div>-->
<!--          <div class="novel-item">《据说我以理服人[快]》</div>-->
<!--          <div class="novel-item">《时之歌：春日醒觉诗》</div>-->
<!--          <div class="novel-item">《阿轻》</div>-->
<!--          <div class="novel-item">《据说我以理服人[快]》</div>-->
<!--          &lt;!&ndash; 可继续添加更多小说条目 &ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
<!--      <div @click="goBh ()" class="menu-category">-->
<!--        <h3 class="category-title">百合小说</h3>-->
<!--        <div class="novel-list">-->
<!--          <div class="novel-item">《交换影后》</div>-->
<!--          <div class="novel-item">《家养一只吸血鬼（GL）》</div>-->
<!--          <div class="novel-item">《窈窕淑女，伊人好逑》</div>-->
<!--          <div class="novel-item">《交换影后》</div>-->
<!--          <div class="novel-item">《家养一只吸血鬼（GL）》</div>-->
<!--          <div class="novel-item">《窈窕淑女，伊人好逑》</div>-->
<!--          &lt;!&ndash; 可继续添加更多小说条目 &ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 底部功能区域 &ndash;&gt;-->
<!--    <div class="bottom-bar">-->
<!--      <div class="menu-bottom">-->
<!--        <div class="bottom-link">原创小说</div>-->
<!--        <div class="bottom-link">完结文库</div>-->
<!--        <div class="bottom-link">出版影视</div>-->
<!--        <div class="bottom-link">中短篇小说</div>-->
<!--        <div class="bottom-link">小书喵悦读</div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import {router} from "@/router/router.ts";-->
<!--import request from "@/utils/request.ts";-->
<!--import {ElMessage} from "element-plus"-->
<!--import {onMounted,ref,reactive,onBeforeMount} from "vue";-->

<!--let yqList = ref([]) //言情主页数据展示列表-->
<!--let noyqList = ref([])//纯爱主页数据展示列表-->
<!--let nocpList = ref([])//无CP+主页数据展示列表-->
<!--let ysList = ref([])//衍生主页数据展示列表-->
<!--let bhList = ref([])//百合主页数据展示列表-->

<!--onBeforeMount(()=>{-->
<!--  request.get("/getList")-->
<!--  .then(response=>{-->
<!--    yqList.value = response.data.yqList;-->
<!--    noyqList.value = response.data.noyqList;-->
<!--    nocpList.value = response.data.nocpList;-->
<!--    ysList.value = response.data.ysList;-->
<!--    bhList.value = response.data.bhList;-->
<!--  })-->
<!--  .catch(error=>{-->
<!--    ElMessage.error(error.message);-->
<!--  })-->
<!--})-->
<!--function goYq() {-->
<!--  router.push({path: '/yq'})-->
<!--}-->
<!--function goNoyq() {-->
<!--  router.push({path: '/noyq'})-->
<!--}-->
<!--function goNocp(){-->
<!--  router.push({path: '/nocp'})-->
<!--}-->
<!--function goYs(){-->
<!--  router.push({path: '/ys'})-->
<!--}-->
<!--function goBh(){-->
<!--  router.push({path: '/bh'})-->
<!--}-->
<!--</script>-->

<!--<style lang="css" src="@/assets/css/content.css"></style>-->